<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">维护上报</block>
		</cu-custom>
		<form>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-green lg"  @click="selectivity">选择维护设备</button>
			</view>
			<view class="cu-form-group">
				<view class="title">设备编号</view>
				<input readonly  name="input" v-model="arryObject.deviceId"></input>
			</view>

			<view class="cu-form-group">
				<view class="title">维护原因</view>
				<textarea  placeholder="请输入维护原因" name="input"  v-model="myFormData.reason"></textarea>
			</view>
			<view class="cu-form-group">
				<view class="title">维护结果</view>
				<textarea  placeholder="请输入维护结果" name="input"  v-model="myFormData.comment"></textarea>
			</view>
			<view class="cu-form-group">
				<view class="title">维护图片</view>
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in tempFileList"  @tap="ViewImage(item.path,index)">
					<view class="feedback-image-item" :key="item.path">
						<image :src="item.path" class="feedback-image-icon"></image>
						<view class="cu-tag bg-red radius" @tap.stop="DelImg(index)">
							<text class='cuIcon-close'></text>
						</view>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage">
					<text class='cuIcon-cameraadd'></text>
				</view>
				</view>
			</view>


			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg"  @click="onSubmit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	import appSelect from '@/components/my-componets/appSelect.vue'


	export default {
		components:{
			appSelect
		 },
		data() {
			return {
				tempFileList:[],
				index: -1,
				switchC: true,
				imgList: [],
				videoList: [],
				plan_type: [] ,
				bx_type: [
					{value:'1',text:"招待费",},
					{value:'2',text:"材料费"},
					{value:'3',text:"交通费"},
					{value:'4',text:"住宿费"},
					{value:'5',text:"市内交通"},
					{value:'6',text:"轮船费"},
					{value:'7',text:"飞机费"},
					{value:'8',text:"公关费"},
					{value:'9',text:"施工费"},
					{value:'10',text:"杂支"}
				] ,
				type:"1",
				selected:[],
				src:"",//视频存放
				uploadUrl:"/two/upload",
				uploadUrlVideo:"/two/uploadVideo",
				cameraList: [{
				                        value: 'back',
				                        name: '后置摄像头',
				                        checked: 'true'
				                    },
				                    {
				                        value: 'front',
				                        name: '前置摄像头'
				                    },
				                ],
				cameraIndex: 0,
				showVideo:false,
				myFormData:{
					workPic:'',
					deviceId:'',//系统设备编号
					reason:'',/** 维修原因 */
					comment:'',/** 维修结果 */
				},
				projectId:'',
				projectDescription:'',
				personLiable:'',
				projectType:'',
				deviceNumber:'',
				arryObject:{
					deviceId:'',
				},
			};
		},
		onLoad: function (item) {

		
		},
	
		onShow() {
		    let pages = getCurrentPages();
		    if (pages[pages.length - 1].$vm.schoolName) {
		        this.arryObject = pages[pages.length - 1].$vm.arryObject
		    }
			console.log('%%%%',this.arryObject)
		},

		computed: {

		},
		
		methods: {
			selectivity(){
				console.log('………………………………………………………………………………')
				
				uni.navigateTo({
						url: '/pages/cathode/cathodeProtectionRecord'
				});
			},
			
			openLog(){
				uni.navigateTo({
					url: '/pages/common/emergencyLog?item='+ encodeURIComponent(JSON.stringify(this.projectId))
				});
			},

			onSubmit() {
				
				let myForm = this.myFormData
				myForm.deviceId = this.arryObject.deviceId
				
				console.log("myForm",myForm)
				
				if(myForm.deviceId == ''){
					this.$tip.alert('请选择设备');
					return false
				}
				if(myForm.reason == ''|| myForm.reason.length==0){
					this.$tip.alert('请填写维护原因');
					return false
				}
				if(myForm.comment == ''|| myForm.comment.length==0){
					this.$tip.alert('请填写维护结果');
					return false
				}
				// if(myForm.workPic == ''|| myForm.workPic.length==0){
				// 	this.$tip.alert('请上传维护图片');
				// 	return false
				// }

				this.$tip.loading();
				this.$http.put('/two/quipmentMaintainRestAdd',myForm).then(res=>{
					console.log(res)
					this.$tip.loaded();
					if (res.data.success){
						this.$tip.toast('提交成功')
						uni.navigateBack({
						  delta:1
						});
					}
				}).catch(()=>{
					this.$tip.loaded();
					this.$tip.error('提交失败')
				});
				
			},
			ChooseImage() {
				var that=this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {

					this.imgList = res.tempFilePaths  //这个是储存到当前页面显示的
					let tempFiles=res.tempFiles;
					tempFiles.forEach(function(item,index){
						console.log("-------------",item.name);
						console.log("-------------",item.path);
						that.tempFileList.push({
							name:item.name,
							path:item.path,
						})
					})

					let myimg = res.tempFilePaths;  //把数据直接插入到服务器  然后返回服务器的存储路径，然后插入到数据库
					
					console.log('***',myimg)
					for(let i = 0;i < myimg.length; i++) {
						console.info("------------myimg--",+myimg[i])
						that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
								filePath: myimg[i],
								name: 'file'
							})
							.then(res => {
								/* that.myFormData.avatar=res.data.message; */
								console.log(res.data.message)
								let v = that.myFormData.workPic;
								if(v==''){
									that.myFormData.workPic=res.data.message;
								}else{
									that.myFormData.workPic=v+','+res.data.message;
								}

							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
						}

					}
				});
			},
			chooseVideo(){
				var that=this;
			    // 上传视频
			    uni.chooseVideo({
			        maxDuration:60,
			        count: 1,
			        camera: this.cameraList[this.cameraIndex].value,
			    	sizeType: ['original'],
			        sourceType: ['album','camera'],
			        success: (res) => {
			            let videoFile = res.tempFilePath;
			    		that.src = res.tempFilePath;
			    		that.$http.upload(that.$config.apiUrl+that.uploadUrlVideo, {
			    			filePath: videoFile,
			    			name: 'file'
			    		})
			    		.then(res => {
			    			that.showVideo=true;
			    			/* this.src = res.data.message; */
			    			that.myFormData.reportVideo=res.data.message;
			    		})
			    		.catch(err => {
			    			that.$tip.error(err.data.message)
			    		});
			    	}
			    })
			},
			ViewImage(path,index) {
				uni.previewImage({
					urls:this.imgList,
					current: index
				});
			},
			DelImg(index) {
				uni.showModal({
					title: '你好',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							console.log("myFormData[删除图片]下标----",index)
							this.tempFileList.splice(index,1)
							console.log(this.tempFileList)

							var picString = this.myFormData.workPic;
							var m = picString.split(",");
							for(let l = 0;l < m.length; l++){
								console.log("myFormDatareportPic返回给后端数据删除前  "+m[l]);
							}
							m.splice(index,1);
							var reporePic=null;
							for(let i = 0;i < m.length; i++){
								if(reporePic==null){
									reporePic=m[i];
								}else{
									reporePic=reporePic+','+m[i];
								}
								console.log("myFormDatareportPic返回给后端数据删除后  "+m[i]);
							}
							this.myFormData.workPic=reporePic

							console.log("拼接完成返回给后端数据  "+this.myFormData.reportPic);
						}
					}
				})
			}

		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.burst-wrap{
	    width: 100%;
	    height: 100%;
	}
	.burst-wrap .burst-wrap-bg>view{
	    width: 90%;
	    height: 100%;
	    margin: 0 auto;
	    position: absolute;
	    top: 65upx;
	    left: 0;
	    right: 0;
	}

	.form-item{
	    width: 100%;
	}
	.form-item textarea{
	    display: block;
	    height: 220upx;
	    width: 100%;
	    color: #AAAAAA;
	    font-size: 28upx;
	}
	.uni-uploader__file,.uploader_video{
	    position: relative;
	    z-index: 1;
	    width: 200upx;
	    height: 200upx;
	}
	.uni-uploader__img {
	    width: 200upx;
	    height: 200upx;
	}
	.icon-cuo {
	    position: absolute;
	    right: 0;
	    top: 5upx;
	    background: linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
	    color: #FFFFFF;
	    z-index: 999;
	    border-top-right-radius: 20upx;
	    border-bottom-left-radius: 20upx;
	}
	.video{
	    width: 100%;
	    height: 100%;
	}

	.login-input-box{
	    position: relative;
	    border-bottom: 1upx solid #EEEEEE;
	}
	.login-input-box .forget,.login-input-box .phone{
	    position: absolute;
	    top: 0;
	    height: 100%;
	    z-index: 100;
	}
	.login-input-box .phone{
	    width: 100upx;
	    left: 0;
	    color: #666666;
	    font-weight: bold;
	}
	.login-input-box .phone-input{
	    padding-left: 100upx;
	}
	.address-wrap,.open-info{
	    margin-top: 20upx;
	}
	.open-info>view:last-child{
	    font-size: 28upx;
	    color: #999999;
	}
	.address-wrap .address {
	    background: #F2F2F2;
	    border-radius: 40upx;
	    padding: 0 20upx;
	}
	.user-set-btn{
	    margin: 40upx;
	    background: linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
	    color: #FFFFFF;
	    text-align: center;
	    height: 88upx;
	    line-height: 88upx;
	}

</style>
